<template>
  <p-login-body>
    <p-login-container>
      <p-login-head>
        <img
          class="logo"
          src="https://s.weituibao.com/1582958061265/mlogo.png"
        >
        <p-login-name>
          <p-login-title>
            小锅锅博客
          </p-login-title>
          <p-login-tips>
            Vue3.0 后台管理系统
          </p-login-tips>
        </p-login-name>
      </p-login-head>
      <el-form
        ref="loginFromRef"
        label-position="top"
        :rules="loginRules"
        :model="loginForm"
        class="login-form"
      >
        <el-form-item
          label="账号"
          prop="username"
        >
          <el-input
            type="text"
            size="large"
            v-model.trim="loginForm.username"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            type="password"
            size="large"
            v-model.trim="loginForm.password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <div style="color: #333">
            登录表示您已同意<a>《服务条款》</a>
          </div>
          <el-button
            style="width: 100%;color:white"
            color="#1baeae"
            size="large"
            @click="submitForm(loginFromRef)"
          >
            立即登录
          </el-button>
          <el-checkbox
            v-model="checked"
            @change="!checked"
          >
            下次自动登录
          </el-checkbox>
        </el-form-item>
      </el-form>
    </p-login-container>
  </p-login-body>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { InitData } from '../../types/login'
import { FormInstance, ElMessage } from 'element-plus'

export default defineComponent({
  name: 'LoginView',
  setup () {
    const data = reactive(new InitData())

    const checked = ref(false)
    const loginRules = {
      username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 6, max: 24, message: '账号长度需要在6~24之间', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 24, message: '密码长度需要在6~24之间', trigger: 'blur' }
      ]
    }

    const submitForm = async (loginFromRef:FormInstance) => {
      console.log(loginFromRef)
      loginFromRef.validate((valid:boolean) => {
        if (valid) {
          ElMessage({
            message: '登陆成功.即将跳转~',
            type: 'success',
            duration: 1000
          })
          // window.location.href = '/'
        } else {
          ElMessage({
            message: '请按要求输入正确!',
            type: 'error',
            duration: 1000
          })
        }
      })
    }

    return {
      ...toRefs(data),
      checked,
      loginRules,
      submitForm
    }
  }
})
</script>

<style lang="sass">
p-login-body
  @apply w-full h-full flex justify-center items-center
  background-image: linear-gradient(25deg, #077f7c, #3aa693, #5ecfaa, #7ffac2)

  p-login-container
    width: 42rem
    height: 50rem
    background-color: #fff
    border-radius: 4px
    box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2)

    p-login-head
      @apply w-full flex justify-center items-center
      padding: 4rem 0 2rem 0

      img
        width: 10rem
        height: 10rem
        margin-right: 2rem
      p-login-name
        @apply block
        p-login-title
          @apply block
          font-size: 28px
          color: #1BAEAE
          font-weight: bold
        p-login-tips
          @apply block
          font-size: 12px
          color: #999

    .login-form
      width: 70%
      margin: 0 auto

      .el-form-item
        margin-bottom: 12px

.el-form--label-top .el-form-item__label
  padding: 0

</style>
